<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../assets/css/unpkg/swiper.min.css">
    <!-- Swiper JS -->
    <script src="../assets/js/unpkg/swiper.min.js"></script>

    <!--    引入jquery     -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <!--    引入bootstrap  -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <!-- Demo styles -->
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        kjxmjkaj body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <!-- Swiper -->
    <div style="height: 60%; margin-top: 100px;">
        <div class="row" style="height: 100%;">
            <div class="col-1" style="height: 100%;">
                <div class="swiper-container swiper-thumbs">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-color: aqua;">Slide 1</div>
                        <div class="swiper-slide" style="background-color: aqua;">Slide 2</div>
                        <div class="swiper-slide" style="background-color: aqua;">Slide 3</div>
                        <div class="swiper-slide" style="background-color: aqua;">Slide 4</div>
                        <div class="swiper-slide" style="background-color: aqua;">Slide 5</div>
                        <div class="swiper-slide" style="background-color: aqua;">Slide 6</div>
                        <div class="swiper-slide" style="background-color: aqua;">Slide 7</div>
                        <div class="swiper-slide" style="background-color: aqua;">Slide 8</div>
                        <div class="swiper-slide" style="background-color: aqua;">Slide 9</div>
                        <div class="swiper-slide" style="background-color: aqua;">Slide 10</div>
                    </div>
                    <!-- Add Scrollbar -->
                    <div class="swiper-scrollbar"></div>

                </div>
            </div>

            <div class="col-5" style="height: 100%; padding: 0;">
                <div class="swiper-container swiper-main">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div style="width: 100%;" class="light">
                                <h3>黄鹤楼</h3><img style="width:100%;"
                                    src="https://bkimg.cdn.bcebos.com/pic/b3b7d0a20cf431ad0f3fdec54d36acaf2fdd9859?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2UxMTY=,xp_5,yp_5">
                                <p>
                                    <div style="padding: 0px;">黄鹤楼位于湖北省武汉市长江南岸的武昌<a target="_blank"
                                            href="/item/%E8%9B%87%E5%B1%B1/32580"
                                            data-lemmaid="32580">蛇山</a>之巅，濒临万里长江，是<a target="_blank"
                                            href="/item/%E5%9B%BD%E5%AE%B65A%E7%BA%A7%E6%97%85%E6%B8%B8%E6%99%AF%E5%8C%BA">国家5A级旅游景区</a>，“<a
                                            target="_blank"
                                            href="/item/%E6%B1%9F%E5%8D%97%E4%B8%89%E5%A4%A7%E5%90%8D%E6%A5%BC/1212495"
                                            data-lemmaid="1212495">江南三大名楼</a>”之一，自古享有“天下江山第一楼“和”<a target="_blank"
                                            href="/item/%E5%A4%A9%E4%B8%8B%E7%BB%9D%E6%99%AF/15761977"
                                            data-lemmaid="15761977">天下绝景</a>“之称。黄鹤楼是<a target="_blank"
                                            href="/item/%E6%AD%A6%E6%B1%89%E5%B8%82/195165"
                                            data-lemmaid="195165">武汉市</a>标志性建筑，与<a target="_blank"
                                            href="/item/%E6%99%B4%E5%B7%9D%E9%98%81/565396"
                                            data-lemmaid="565396">晴川阁</a>、<a target="_blank"
                                            href="/item/%E5%8F%A4%E7%90%B4%E5%8F%B0/415630"
                                            data-lemmaid="415630">古琴台</a>并称“武汉三大名胜”。</div>
                                </p>
                            </div>

                        </div>
                        <div class="swiper-slide">Slide 2</div>
                        <div class="swiper-slide">Slide 3</div>
                        <div class="swiper-slide">Slide 4</div>
                        <div class="swiper-slide">Slide 5</div>
                        <div class="swiper-slide">Slide 6</div>
                        <div class="swiper-slide">Slide 7</div>
                        <div class="swiper-slide">Slide 8</div>
                        <div class="swiper-slide">Slide 9</div>
                        <div class="swiper-slide">Slide 10</div>
                    </div>
                    
                </div>
            </div>
        </div>
        <div class="row" style="height: 40px;">
            <div class="col-1"></div>
            <div class="col-5" style="height: 100%;">
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
    </div>




    <!-- Initialize Swiper -->
    <script>
        var thumbs = new Swiper(".swiper-thumbs", {
            direction: 'vertical',
            spaceBetween: 5,
            slidesPerView: 5,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
            scrollbar: {
                el: '.swiper-scrollbar',
                hide: true,
            },
        });

        var swiper = new Swiper('.swiper-main', {
            direction: 'vertical',
            pagination: {
                el: '.swiper-pagination',
                type: 'fraction',
            },
            thumbs: {
                swiper: thumbs
            }
        });
    </script>
</body>

</html>